<template>
	<view class="zh-pay">
		<view class="mt-200" v-if="payData.total === 0">
			<empty-data  :imgSrc="IMG_URL + '/status/no_list.png'"></empty-data>
		</view>
		<view v-if="payData.total > 0">
			<view class="section" v-for="(item, index) in payData.list" :key="item.id">
				<view class="top display-flex justify-between align-center">
					<view class="font-302D2D font-28 font-bold">
						<text class="name">付款金额</text>
						<text>{{ item.subtotal }}元</text>
					</view>
					<view class="display-flex align-center font-28" @click.stop="edit(item)" v-if="type === Businesstype.purchase && orderStatus === OrderStatus.assert">
						<image src="@/static/icons/edit_icon.png"  class="audit-icon"/>
						<text class="ml-10 font-1769ff">编辑</text>
					</view>
				</view>
				<view class="content">
					<view class="item display-flex font-26">
						<view class="name">
							<text class="font-bold">付款信息</text>
						</view>
						<view>
							<view>
								<text class="font-999">付款时间：</text>
								<text>{{ item.paymentdate }}</text>
							</view>
							<view class="mt-15">
								<text class="font-999">订单方式：</text>
								<text>{{ Paymentmode.online?"线上转账":"线下转账" }}</text>
							</view>
							<view class="mt-15">
								<text class="font-999">付款人：</text>
								<text>{{ item.payingCompanyName }}</text>
							</view>
							<view class="mt-15">
								<text class="font-999">收款人：</text>
								<text>{{ item.receivingCompanyName }}</text>
							</view>
							<view class="mt-15">
								<text class="font-999">备注：</text>
								<text>{{ item.remark || '-' }}</text>
							</view>
						</view>
					</view>
					<view class="item display-flex font-26" v-if="item.paymentvoucher">
						<view class="name">
							<text class="font-bold">付款凭证</text>
						</view>
						<view @click.stop="clickFile(index)">
							<image :src="previewImg(item.paymentvoucher)" class="file-img"/>
						</view>
					</view>
				</view>
			</view>
		</view>
		<imgs-preview :imgs="generalImgs.fileImgs" :show="generalImgs.show" :current="generalImgs.index" @close="changeFileImgShow"></imgs-preview>
	</view>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'
	import { order } from '@/api'
	import { tip, util } from '@/utils'
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
	import { Paymentmode } from '@/enum/order'
	import { Businesstype } from '@/enum/order'
	import { OrderStatus } from '@/enum/order'
	import emptyData from '@/pages/components/empty-data'
	import { IMG_URL } from '@/utils/constant'
	
	const orderStatus = ref('')
	const type = ref('')
	const payData: any = reactive({
		query:{
			id:''
		},
		params:{
			pageNum:1,
			pageSize:10,
			reasonable:false,
		},
		waitPay:0,
		list:[],
		total:''
	})
	
	const generalImgs:any = reactive({
		show:false,
		fileImgs:[],
		index:0
	})
	
	onLoad((options:any) => {
		payData.query.id = options.id
		payData.waitPay = options.waitPay
		type.value = options.type
		orderStatus.value = options.status
		payList()
	})
	
	onPullDownRefresh(() => {
		refresh()
		setTimeout(function () {
			uni.stopPullDownRefresh()
		}, 1000)
	})
	
	uni.$on('payEdit', (res:any) => {
		refresh()
	})
	
	const payList = () => {
		order.getPayList(payData.query).then((res:any) => {
			payData.list = [...payData.list,...res.data],
			payData.total = res.data.length || 0
			generalImgs.fileImgs = []
			payData.list.map((item:any) => {
				generalImgs.fileImgs.push(previewImg(item.paymentvoucher))
			})
			
		})
	}
	
	const edit = (item: any) => {
		const info = util.setObjParams(item)
		const params = util.paramsStr({
			info:info,
			payingCompanyName: item.payingCompanyName,
			receivingCompanyName: item.receivingCompanyName,
			waitPay:parseFloat(payData.waitPay) + parseFloat(item.subtotal)
		})
		
		navigateTo('/pages/order/pay/add' + params)
	}
	
	const refresh = () => {
		payData.params.pageNum = 1
		payData.list = []
		payList()
	}
	
	const navigateTo = (url:string) => {
		uni.navigateTo({url:url})
	}
	
	const previewImg = (url:string) => {
		return util.previewImg(url)
	}
	
	const changeFileImgShow = () => {
		generalImgs.show = !generalImgs.show
	}
	
	const clickFile = (index:number) => {
		generalImgs.index = index
		changeFileImgShow()
	}
</script>

<style lang="scss" scoped>
	.zh-pay {
		padding-bottom:120rpx;
		.section {
			background-color: $uni-bg-card-color;
			padding:30rpx 30rpx 0;
			margin-top: 20rpx;
			.top {
				padding-bottom: 30rpx;
				.name {
					display:inline-block;
					width: 160rpx;
				}
				.audit-icon {
					width: 26rpx;
					height: 26rpx;
				}
			}
			.content {
				.item {
					padding:30rpx 0;
					border-top: 1rpx solid $uni-border-color;
					.name {
						width: 160rpx;
					}
					.file-img {
						width: 166rpx;
						height: 166rpx;
						border: 1rpx solid #E5E5E5;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
</style>
